<template>
  <!-- 添加或修改帮扶小组对话框 -->
  <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="身份证" prop="idno">
        <el-input v-model="form.idno" placeholder="请输入身份证" />
      </el-form-item>
      <el-form-item label="联系电话" prop="lxdh">
        <el-input v-model="form.lxdh" placeholder="请输入联系电话" />
      </el-form-item>
      <el-form-item label="工作单位" prop="gzdw">
        <el-input v-model="form.gzdw" placeholder="请输入工作单位" />
      </el-form-item>
      <el-form-item label="工作职务" prop="gzzw">
        <el-input v-model="form.gzzw" placeholder="请输入工作职务" />
      </el-form-item>
      <el-form-item label="所属身份" prop="sssf">
        <el-input v-model="form.sssf" placeholder="请输入所属身份" />
      </el-form-item>
      <el-form-item label="联系地址" prop="lxdz">
        <el-input v-model="form.lxdz" placeholder="请输入联系地址" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="buttonLoading" type="primary" @click="submitForm"
        >确 定</el-button
      >
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  addHelpGroup,
  getHelpGroup,
  updateHelpGroup,
} from "@/api/user/helpGroup";

export default {
  name: "HelpGroup",
  data() {
    return {
      // 按钮loading
      buttonLoading: false,

      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,

      // 表单参数
      form: {},
      // 表单校验
      rules: {
        userId: [
          { required: true, message: "人员id不能为空", trigger: "blur" },
        ],
        name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
        idno: [{ required: true, message: "身份证不能为空", trigger: "blur" }],
        lxdh: [
          { required: true, message: "联系电话不能为空", trigger: "blur" },
        ],
        gzdw: [
          { required: true, message: "工作单位不能为空", trigger: "blur" },
        ],
        gzzw: [
          { required: true, message: "工作职务不能为空", trigger: "blur" },
        ],
        sssf: [
          { required: true, message: "所属身份不能为空", trigger: "blur" },
        ],
        lxdz: [
          { required: true, message: "联系地址不能为空", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        userId: undefined,
        name: undefined,
        idno: undefined,
        lxdh: undefined,
        gzdw: undefined,
        gzzw: undefined,
        sssf: undefined,
        lxdz: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
      };
      this.resetForm("form");
    },

    /** 新增按钮操作 */
    openModal(userId, groupId) {
      this.reset();
      this.open = true;
      this.title = "添加帮扶小组";
      this.form.userId = userId;
      if (groupId) {
        this.title = "编辑帮扶小组";
        getHelpGroup(groupId).then((res) => {
          this.form = res.data;
        });
      }
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.helpGroupId != null) {
            updateHelpGroup(this.form)
              .then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.$emit("data-updated");
                this.open = false;
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          } else {
            addHelpGroup(this.form)
              .then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.$emit("data-updated");
                this.open = false;
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          }
        }
      });
    },
  },
};
</script>
